{{define "logs/slowquery.html"}}
<!DOCTYPE html>
<html lang="en">
{{template "common/header.html" .}}
<body>
    <div id="wrapper" class="container">
        {{template "common/navbar.html" .}}
        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-8">
                    <h1 class="page-header">慢查询日志</h1>
                </div>
                <!-- /.col-lg-12 -->
                <div class="col-lg-4">
                    <div>
                        <div id="alert-success" class="alert alert-success fade in hidden">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                            <strong class="title">Success!</strong>
                            <span class="message">Your message has been sent successfully.</span>
                        </div>
                    </div>
                    <div>
                        <div id="alert-error" class="alert alert-danger fade in hidden">
                            <a href="#" class="close" data-dismiss="alert">&times;</a>
                            <strong class="title">Error!</strong>
                            <span class="message">Your message has been sent Error.</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                            慢查询日志
                        </div>
                        <!-- /.panel-heading -->
                        <div class="panel-body">
                            <div class="dataTable_wrapper">
                            </div>
                            
                            <!-- /.table-responsive -->
                        </div>
                        <!-- /.panel-body -->
                    </div>
                    <!-- /.panel -->
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->
    </div>
    <!-- /#wrapper -->
    {{template "common/footer.html" .}}
    <script>
    (function($) {
        $.extend({
            myTime: {
            /**
             * 当前时间戳
             * @return <int>    unix时间戳(秒) 
             */
            CurTime: function(){
                return Date.parse(new Date())/1000;
            },
            Duration: function(d){
                if (d < 1000){
                    return d + "ns";
                }else if (d < 1000*1000){
                    return Math.floor(d)/1000 + "us";
                } else if (d < 1000*1000*1000){
                    return Math.floor(d/1000)/1000 + "ms"
                } else {
                    return Math.floor(d/1000000)/1000 + "s"
                }
            },
            /**       
             * 日期 转换为 Unix时间戳
             * @param <string> 2014-01-01 20:20:20 日期格式       
             * @return <int>    unix时间戳(秒)       
             */
            DateToUnix: function(string) {
                var f = string.split(' ', 2);
                var d = (f[0] ? f[0] : '').split('-', 3);
                var t = (f[1] ? f[1] : '').split(':', 3);
                return (new Date(
                    parseInt(d[0], 10) || null,
                    (parseInt(d[1], 10) || 1) - 1,
                    parseInt(d[2], 10) || null,
                    parseInt(t[0], 10) || null,
                    parseInt(t[1], 10) || null,
                    parseInt(t[2], 10) || null
                    )).getTime() / 1000;
            },
            /**       
             * 时间戳转换日期       
             * @param <int> unixTime  待时间戳(秒)       
             * @param <bool> isFull  返回完整时间(Y-m-d 或者 Y-m-d H:i:s)       
             * @param <int> timeZone  时区       
             */
            UnixToDate: function(unixTime, isFull, timeZone) {
                if (typeof (timeZone) == 'number')
                {
                unixTime = parseInt(unixTime) + parseInt(timeZone) * 60 * 60;
                }
                var time = new Date(unixTime * 1000);
                var ymdhis = "";
                ymdhis += time.getUTCFullYear() + "-";
                ymdhis += (time.getUTCMonth()+1) + "-";
                ymdhis += time.getUTCDate();
                if (isFull === true)
                {
                ymdhis += " " + time.getUTCHours() + ":";
                ymdhis += time.getUTCMinutes() + ":";
                ymdhis += time.getUTCSeconds();
                }
                return ymdhis;
            }
            }
        });
        })(jQuery);
    </script>
    <script>
        //http://127.0.0.1:8086/query?q=select+%22user%22%2Cusetime%2Cdb%2Chost%2Cip%2Cnode%2Csql+from+slowquery+order+by+time+desc+limit+100&db=telegraf&epoch=s
        var api ="{{.data.Value}}"
        $(document).ready(function() {
            $.getJSON(api, function(data, status){
                if (status != "success"){
                    $("#alert-error .message").text("查询慢查询日志失败,code:"+ status);
                    $("#alert-error").removeClass("hidden").addClass("show");
                    return
                }
                var name = data.results[0].series[0].name;
                var cols = data.results[0].series[0].columns;
                var titles = [];
                for (var i in cols){
                    titles.push({"title":cols[i]});
                }
                var dataSet = data.results[0].series[0].values;
                //console.log(name,cols,titles,dataSet);
                for (i in dataSet){
                    //convert time
                    var d = dataSet[i];
                    d[0] = $.myTime.UnixToDate(d[0], true, 8);
                    d[2] = $.myTime.Duration(d[2]);
                    // d[7] = "";
                }
                $(".dataTable_wrapper").html(' <table width="100%" class="table table-striped table-bordered table-hover" id="dt-slowquery">');
                $("#dt-slowquery").dataTable({
                    "aaSorting": [[ 0, "desc" ]],
                    "data":dataSet,
                    "columns":titles,
                    //attr
                    "aLengthMenu" : [20, 50, 100],
                    "bProcessing" : true,
                });
            });
        });
    </script>
</body>

</html>
{{end}}